﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Styles.Render("~/Content/css")
</head>
<body>
    <div>
        @using (Ajax.BeginForm("", "", new AjaxOptions()
        {
            HttpMethod = "POST",
            OnSuccess = "mySuccess"
        }, new
        {
            style = "width: 450px;margin: 20px;",
            @class = "layui-form layui-form-pane",
            //lay -filter = "myform"
        }))
        {
            <!-- 宽输入框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" value="Test" lay-verify="required|username" placeholder="请输入账户" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <!-- 单选按钮 -->
            <div class="layui-form-item" pane>
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男">
                    <input type="radio" name="sex" value="女" title="女" checked>
                </div>
            </div>

            <!-- 宽输入框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" value="123@qq.com" lay-verify="email|myemial" placeholder="请输入邮箱" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <!-- 窄输入框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="pwd" value="123" lay-verify="required" placeholder="请输入密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <!-- 组合框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">薪水</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="xs1" value="10000" lay-verify="required" placeholder="请输入开始" autocomplete="off"
                           class="layui-input">
                </div>
                <div class=" layui-form-mid ">-</div>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="xs2" value="20000" lay-verify="required" placeholder="请输入结束" autocomplete="off"
                           class="layui-input">
                </div>
            </div>

            <!-- 复选框 -->
            <div class="layui-form-item" pane>
                <label class="layui-form-label">爱好</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="hobby" value="篮球" title="篮球">
                    <input type="checkbox" name="hobby" value="足球" title="足球" checked>
                    <input type="checkbox" name="hobby" value="排球" title="排球" lay-skin="primary">
                </div>
            </div>

            <!-- 开关 -->
            <div class="layui-form-item" pane>
                <label class="layui-form-label">开关</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="kg" checked="checked" lay-skin="switch" lay-text="开|关">

                </div>
            </div>

            <!-- 下拉框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">城市</label>
                <div class="layui-input-block selectUp">
                    <select name="city">
                        <option value="长沙">长沙</option>
                        <option value="常德">常德</option>
                        <option value="郴州">郴州</option>
                    </select>

                </div>
            </div>

            <!-- 文本域-->
            <div class="layui-form-item" pane>
                <label class="layui-form-label">个人简介</label>
                <div class="layui-input-block">
                    <textarea class=" layui-textarea " name="" id="" cols="30" rows="5">
            </textarea>
                </div>
            </div>

            <!-- 按钮 -->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="submit" lay-submit class="layui-btn" value="立即提交">
                    <input type="reset" class="layui-btn layui-btn-primary" value="取消">
                </div>
            </div>

        }
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/layui")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryajax")

    <script type="text/javascript">

        var layer;
        layui.use(["form", "layer"], function () {
            var form = layui.form, layer = layui.layer;

            form.render();
        })

        function mySuccess(data) {
            console.log(data);
        }
    </script>
</body>
</html>
